<template>
  <a-modal
    v-model:visible="visible"
    :footer="false"
    simple
    hide-title
    modal-class="!p-0px !w-400px !rounded-16px"
  >
    <a-form :model="form" :style="{ width: '400px' }" @submit="handleSubmit" :rules="rules">
      <div class="p-20px">
        <a-form-item field="score" label="评分">
          <a-rate :default-value="5" :value="form.score" allow-half color="#7733ff" />
        </a-form-item>
        <a-form-item field="content" label="内容">
          <div class="w-300px rounded-8px flex flex-row items-center">
            <textarea
              v-model="form.content"
              placeholder="评价一下吧"
              maxlength="200"
              class="input area w-full max-h-200px min-h-100px rounded-8px"
              type="text"
            />
          </div>
        </a-form-item>
        <a-form-item>
          <div class="submit">
            <button
              class="px-16px box-border h-32px rounded-8px bg-gradient-to-r from-#FF4DC4 to-#7733FF text-14px font-bold text-white hover:scale-105 transition"
              html-type="submit"
            >
              保存
            </button>
          </div>
        </a-form-item>
      </div>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, onMounted, reactive, computed, watchEffect } from 'vue'
import { useVModel } from '@vueuse/core'
import { conmmentSkill } from '@/api/game'
import { Message } from '@arco-design/web-vue'
const props = defineProps(['visible', 'info'])
const emits = defineEmits(['update:visible', 'submit'])
const visible = useVModel(props, 'visible', emits)
const form = reactive({
  content: '',
  score: 5
})
watchEffect(() => {
  if (visible.value) {
    form.content
  } else {
    form.content = ''
    form.score = 5
  }
})
const rules = {
  content: [
    {
      required: true,
      message: '请输入评价内容'
    }
  ],
  score: [
    {
      required: true,
      message: '请选择评分'
    }
  ]
}
const handleSubmit = () => {
  conmmentSkill({
    order_id: props.info.id,
    skill_id: props.info.skill_id,
    user_id: props.info.user_id,
    content: form.content,
    score: form.score
  }).then((res) => {
    Message.success('评价成功')
    // console.log(res)
    emits('submit')
  })
}
</script>
<style lang="less" scoped>
.input {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  outline: none;
  padding: 10px;
}
.input:focus {
  box-shadow: 0 0 0 2px #7733ff;
  border: 1px solid transparent;
}
.area {
  overflow-y: hidden;
}
</style>
